<template>
  <div class="set">
    <div class="top">
      <van-icon name="arrow-left" size="25" @click="onBack" />
      <div class="t">设置</div>
    </div>
    <div class="content">
      <van-cell is-link @click="toPersonalData">
        <img :src="userData.portrait" alt="" />
        <div class="r">
          <div class="nickName">{{ userData.nickName }}</div>
          <div class="phone">{{ userData.phone }}</div>
        </div>
      </van-cell>
      <button class="exit" @click="onExit">退出登录</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "Set",
  data() {
    return {
      users: [],
      userData: {
        phone: "",
        password: "",
        isLogin: false,
        Focus: [],
        nickName: "",
        portrait: "",
        gender: 1,
        location: "",
        signature: "",
      },
    };
  },
  created() {
    if (localStorage.getItem("users")) {
      this.users = JSON.parse(localStorage.getItem("users"));
      this.users.forEach((ele) => {
        if (ele.isLogin) {
          for (let key in this.userData) {
            this.userData[key] = ele[key];
          }
        }
      });
    }
  },
  methods: {
    onBack() {
      this.$router.go(-1);
    },
    onExit() {
      this.$dialog
        .confirm({
          title: "提示",
          message: "确定要退出登录吗",
        })
        .then(() => {
          this.users.forEach((ele) => {
            if (ele.isLogin) {
              ele.isLogin = false;
            }
          });
          localStorage.setItem("users", JSON.stringify(this.users));
          this.$router.push({ name: "My" });
        })
        .catch(() => {
          // on cancel
        });
    },
    toPersonalData() {
      this.$router.push({ name: "PersonalData" });
    },
  },
};
</script>

<style lang="scss" scoped>
.set {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  .top {
    width: calc(100% - 20px);
    padding: 40px 10px 10px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #eee;
    background-color: #fbb705;
    .t {
      font-size: 20px;
      margin-left: 40px;
    }
  }
  .content {
    .van-cell {
      display: flex;
      align-items: center;
      border-bottom: 1px solid #eee;
      .van-cell__value {
        display: flex;
        align-items: center;
      }
      img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
      }
      .r {
        margin-left: 15px;
      }
    }
    .exit {
      width: 90%;
      margin: 5%;
      border-style: none;
      background-color: #fbb705;
      padding: 10px 0;
      border-radius: 20px;
      position: absolute;
      bottom: 20px;
    }
  }
}
</style>